<template>
  <div class="FuneralParlourSummary overflowY">
    <div class="PageContent">
      <el-form :model="summaryData" :inline="true" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <div class="PageItem margintop20">
          <el-row :gutter="0" class="summarySearch">
            <el-form-item label="查询日期:">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.settleStartTime"
                              format="yyyy-MM-dd"></el-date-picker>
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.settleEndTime"
                              format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-if="btnRight.btnFuneralParlourSummarySearch"
                         @click="onSubmit('search')">查询
              </el-button>
              <el-button v-if="btnRight.btnFuneralParlourSummaryReset"
                         @click="resetQuery('ruleForm')">重置
              </el-button>
            </el-form-item>
          </el-row>
        </div>
        <el-row></el-row>
        <div class="PageItem marginbottom0">
          <table class="define-table" width="1200" height="246">
            <tr>
              <td class="">到馆人数:</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.deadPeopleNumber }}</td>
              <td class="define-td" rowspan="3">服务收入:</td>
              <td class="define-td">其中物品收入(元):{{ summaryData.serviceGoodsEarning }}</td>
              <td class="define-td">其中服务收入(元):{{ summaryData.serviceEarning }}</td>
              <td rowspan="6" class="define-td">实收总费用(元):{{ summaryData.sumRealityCharge }}<br/><br/>
              减免总费用(元):{{ summaryData.searchStatisticsBenefitViewData.benefitTotalCharge }}</td>
               <td class="define-td">火化费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitCremtionNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitCremationCharge}}</td>
            </tr>
            <tr>
              <td>火化人数</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.cremationPeopleNumber }}</td>
              <td class="define-td">其中物品退款(元):{{ summaryData.serviceGoodsRefund }}</td>
              <td class="define-td">其中服务退款(元):{{ summaryData.serviceRefund }}</td>
              <td class="define-td">冷藏费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitColdStorageNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitColdStorageCharge}}</td>
            </tr>
            <tr>
              <td>告别人数:</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.farewellMournPeopleNumber }}</td>
              <td class="define-td" colspan="2">实收费用(元):{{ summaryData.serviceRealityCharge }}</td>
               <td class="define-td">接运费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitJieYunNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitJieYunCharge}}</td>
            </tr>
            <tr>
              <td>守灵人数:</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.wakeMournPeopleNumber }}</td>
              <td style="text-align: center;vertical-align: middle" rowspan="3">零售合计:</td>
              <td class="define-td">其中物品收入(元):{{ summaryData.retailGoodsEarning }}</td>
              <td class="define-td">其中服务收入(元):{{ summaryData.retailServiceEarning }}</td>
              <td class="define-td">消毒费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitXiaoDuNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitXiaoDuCharge}}</td>
            </tr>
            <tr>
              <td>冷藏人数:</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.coldStoragePeopleNumber }}</td>
              <td class="define-td">其中物品退款(元):{{ summaryData.retailGoodsRefund }}</td>
              <td class="define-td">其中服务退款(元):{{ summaryData.retailServiceRefund }}</td>
              <td class="define-td">馆内胎尸费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitColdStorageNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitColdStorageCharge}}</td>
            </tr>
            <tr>
              <td>整容服务</td>
              <td>{{ summaryData.searchStatisticsPeopleNumberData.faceLiftPeopleNumber }}</td>
              <td class="define-td" colspan="2">实收费用(元):{{ summaryData.retailRealityCharge }}</td>
              <td class="define-td">骨灰寄存费减免</td>
               <td class="define-td">数量：{{summaryData.searchStatisticsBenefitViewData.benefitJiCunNumber}}</td>
              <td class="define-td">金额：{{summaryData.searchStatisticsBenefitViewData.benefitJiCunCharge}}</td>
            </tr>
          </table>
        </div>
        <div class="PageItem ">
          <el-row class="PageInfo">
            <i class="el-icon-add-location"></i>零售
          </el-row>
          <div class="border1">
            <el-table
              :data="summaryData.retailChargeItems.list"
              border
              :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
              stripe
              style="width: 100%;">
              <el-table-column
                type="index"
                align='center'
                label="序号"
                width="100"
                :index="indexMethod"
              >
              </el-table-column>
              <el-table-column
                prop="itemName"
                align='center'
                label="服务项目名称"
                width="220">
              </el-table-column>
              <el-table-column
                prop="itemNumber"
                align='center'
                label="数量"
                width="220">
              </el-table-column>
              <el-table-column
                prop="itemCharge"
                align='center'
                label="金额"
                width="220">
              </el-table-column>
              <el-table-column
                prop="settleTime"
                align='center'
                label="结算时间"
                width="200">
              </el-table-column>
            </el-table>
          </div>
          <div style="text-align: center;
                      height: 0px;
                      line-height: 20px;
                      font-size: 18px;">
            显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
          </div>
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              background
              layout="total,sizes,prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {dataFormatetmd} from "@/utils";
import * as Type from "@/api/service";

export default {
  name: "FuneralParlourSummary",
  data() {
    return {
      loading: true,
      type: [],
      ruleForm: {
        settleStartTime: "",
        settleEndTime: "",
        pageSize: 50,
        currentPage: 1,
        exportExcelFlag: 0,
        orderField: "",
        orderType: ""
      },
      pager: {
        pageSize: 20,
        total: 1,
        currentPage: 1
      },
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnFuneralParlourSummarySearch: true, //查询
        btnFuneralParlourSummaryReset: true,//重置
      },
      //统计数据
      summaryData: {
        searchStatisticsPeopleNumberData: {
          //总人数
          deadPeopleNumber: 0,
          //火化人数
          cremationPeopleNumber: 0,
          //告别人数
          farewellMournPeopleNumber: 0,
          //守灵人数
          wakeMournPeopleNumber: 0,
          //冷藏人数
          coldStoragePeopleNumber: 0,
          //整容人数
          faceLiftPeopleNumber: 0
        },
         searchStatisticsBenefitViewData: {
          //火化减免数量
          benefitCremtionNumber: 0,
          //火化减免金额
          benefitCremationCharge: 0,
          //冷藏减免数量
          benefitColdStorageNumber: 0,
          //冷藏减免金额
          benefitColdStorageCharge: 0,
          //接运减免数量
          benefitJieYunNumber: 0,
          //接运减免金额
          benefitJieYunCharge: 0,
          //火化减免数量
          benefitXiaoDuNumber: 0,
          //火化减免金额
          benefitXiaoDuCharge: 0,
          //冷藏减免数量
          benefitTaiShiNumber: 0,
          //冷藏减免金额
          benefitTaiShiCharge: 0,
          //接运减免数量
          benefitJiCunNumber: 0,
          //接运减免金额
          benefitJiCunCharge: 0,
        //减免总金额
          benefitTotalCharge: 0,
        },
        //服务物品收入金额
        serviceGoodsEarning: 0,
        //服务物品退费金额
        serviceGoodsRefund: 0,
        //服务收入金额
        serviceEarning: 0,
        //服务退费金额
        serviceRefund: 0,
        //服务实收金额
        serviceRealityCharge: 0,
        //零售物品收入金额
        retailGoodsEarning: 0,
        //零售物品退费金额
        retailGoodsRefund: 0,
        //零售服务收入金额
        retailServiceEarning: 0,
        //零售服务退费金额
        retailServiceRefund: 0,
        //零售实收金额
        retailRealityCharge: 0,
        //总费用
        sumRealityCharge: 0,
        //服务收入费用项
        serviceChargeItems: {
          list: [],
        },
        //零售合计费用项
        retailChargeItems: {
          list: [],
        },
        pager: {
          //每页行数
          pageSize: 20,
          //总行数
          total: 1,
          //当前页数
          currentPage: 1
        }

      }
    }
  },
  //载入按钮
  mounted() {
    this.ruleForm.settleStartTime = new Date();
    this.ruleForm.settleEndTime = new Date();
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] === "true") ? true : false;
    }
    this.onSubmit()
    var that = this
    window.onresize = function () {
      var search = document.getElementsByClassName("summarySearch")[0].offsetHeight
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      that.tableHeight = dom - search - 110
    }
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      var search = document.getElementsByClassName("summarySearch")[0].offsetHeight
      this.tableHeight = dom - search - 110
    })
  },
  methods: {
    //解决索引只排序当前页的问题,增加函数自定义索引序号
    indexMethod(index) {
      return (this.pager.currentPage - 1) * this.pager.pageSize + index + 1;
    },
    onSubmit(value) {
      this.loading = true
      if (value) {
        this.pager.currentPage = 1;
      }
      var postData = {
        "settleStartTime": dataFormatetmd(new Date(this.ruleForm.settleStartTime)),
        "settleEndTime": dataFormatetmd(new Date(this.ruleForm.settleEndTime)),
        "pageSize": this.pager.pageSize,
        "currentPage": this.pager.currentPage,
        "exportExcelFlag": 0,            //表示显示 1表示导出execl
        "orderField	": "",     //排序字段
        "orderType": ""        //排序顺序
      }
      //查询殡仪馆数据统计的接口
      Type['loadStatisticsSummaryTable'](postData).then(response => {
        const {data} = response;
        if (!data) {
          this.loading = false;
          this.$message('数据读取失败')
          return
        }
        //数据读取成功
        this.summaryData = data
        //总费用赋值
        this.summaryData.sumRealityCharge = data.serviceRealityCharge + data.retailRealityCharge;
        this.pager = data.retailChargeItems.pager
        this.loading = false
      }).catch(error => {
        // this.$message(error.data.message)
        this.loading = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ruleForm.settleStartTime = "";
      this.ruleForm.settleEndTime = "";
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit()  //点击第几页
    },
  }
}
</script>
<style scoped>
.border1 {
  border: 1px solid #e2dada;
  padding: 10px;
}

.define-table {
  border-collapse: collapse;
  border-spacing: 0;
  border-left: 1px solid #888;
  border-top: 1px solid #888;
}

.define-table th, .define-table td {
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 5px 15px;
}

.define-table th {
  font-weight: bold;
  background: #ccc;
}

.define-td {
  text-align: center;
  vertical-align: middle;
}
</style>
